Skip to main content

Tailwind CSS Cheatsheet

A comprehensive quick reference for Tailwind CSS utility classes.

🚀 Setup​

# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# In tailwind.config.js, add your content paths
content: ["./src/**/*.{js,ts,jsx,tsx,html}"]

# Add to your main CSS file
@tailwind base;
@tailwind components;
@tailwind utilities;

📐 Layout​

Display​

ClassCSS
blockdisplay: block
inline-blockdisplay: inline-block
inlinedisplay: inline
flexdisplay: flex
inline-flexdisplay: inline-flex
griddisplay: grid
inline-griddisplay: inline-grid
hiddendisplay: none

Position​

ClassCSS
staticposition: static
fixedposition: fixed
absoluteposition: absolute
relativeposition: relative
stickyposition: sticky

Top / Right / Bottom / Left​

ClassCSS
top-0top: 0
right-0right: 0
bottom-0bottom: 0
left-0left: 0
inset-0top: 0; right: 0; bottom: 0; left: 0
inset-x-0left: 0; right: 0
inset-y-0top: 0; bottom: 0
top-1/2top: 50%
left-fullleft: 100%

Z-Index​

ClassCSS
z-0z-index: 0
z-10z-index: 10
z-20z-index: 20
z-30z-index: 30
z-40z-index: 40
z-50z-index: 50
z-autoz-index: auto

📦 Flexbox​

Flex Direction​

ClassCSS
flex-rowflex-direction: row
flex-row-reverseflex-direction: row-reverse
flex-colflex-direction: column
flex-col-reverseflex-direction: column-reverse

Flex Wrap​

ClassCSS
flex-wrapflex-wrap: wrap
flex-wrap-reverseflex-wrap: wrap-reverse
flex-nowrapflex-wrap: nowrap

Justify Content​

ClassCSS
justify-startjustify-content: flex-start
justify-endjustify-content: flex-end
justify-centerjustify-content: center
justify-betweenjustify-content: space-between
justify-aroundjustify-content: space-around
justify-evenlyjustify-content: space-evenly

Align Items​

ClassCSS
items-startalign-items: flex-start
items-endalign-items: flex-end
items-centeralign-items: center
items-baselinealign-items: baseline
items-stretchalign-items: stretch

Align Self​

ClassCSS
self-autoalign-self: auto
self-startalign-self: flex-start
self-endalign-self: flex-end
self-centeralign-self: center
self-stretchalign-self: stretch

Flex Grow / Shrink​

ClassCSS
flex-1flex: 1 1 0%
flex-autoflex: 1 1 auto
flex-initialflex: 0 1 auto
flex-noneflex: none
growflex-grow: 1
grow-0flex-grow: 0
shrinkflex-shrink: 1
shrink-0flex-shrink: 0

Gap​

ClassCSS
gap-0gap: 0
gap-1gap: 0.25rem
gap-2gap: 0.5rem
gap-4gap: 1rem
gap-8gap: 2rem
gap-x-4column-gap: 1rem
gap-y-4row-gap: 1rem

🔲 Grid​

Grid Template Columns​

ClassCSS
grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr))
grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr))
grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr))
grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr))
grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr))
grid-cols-12grid-template-columns: repeat(12, minmax(0, 1fr))
grid-cols-nonegrid-template-columns: none

Grid Template Rows​

ClassCSS
grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr))
grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr))
grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr))
grid-rows-6grid-template-rows: repeat(6, minmax(0, 1fr))

Grid Column Span​

ClassCSS
col-autogrid-column: auto
col-span-1grid-column: span 1 / span 1
col-span-2grid-column: span 2 / span 2
col-span-3grid-column: span 3 / span 3
col-span-fullgrid-column: 1 / -1
col-start-1grid-column-start: 1
col-end-3grid-column-end: 3

📏 Spacing​

Padding​

ClassCSSValue
p-0padding: 00px
p-1padding: 0.25rem4px
p-2padding: 0.5rem8px
p-3padding: 0.75rem12px
p-4padding: 1rem16px
p-5padding: 1.25rem20px
p-6padding: 1.5rem24px
p-8padding: 2rem32px
p-10padding: 2.5rem40px
p-12padding: 3rem48px
p-16padding: 4rem64px

Directional Padding:

  • px-* → horizontal (left + right)
  • py-* → vertical (top + bottom)
  • pt-* → top
  • pr-* → right
  • pb-* → bottom
  • pl-* → left

Margin​

ClassCSSValue
m-0margin: 00px
m-1margin: 0.25rem4px
m-2margin: 0.5rem8px
m-4margin: 1rem16px
m-8margin: 2rem32px
m-automargin: autoauto
-m-1margin: -0.25rem-4px

Directional Margin:

  • mx-* → horizontal
  • my-* → vertical
  • mt-*, mr-*, mb-*, ml-* → individual sides

Space Between (Children)​

ClassCSS
space-x-4Horizontal space between children
space-y-4Vertical space between children
space-x-reverseReverse horizontal spacing
space-y-reverseReverse vertical spacing

📐 Sizing​

Width​

ClassCSS
w-0width: 0
w-1width: 0.25rem
w-4width: 1rem
w-8width: 2rem
w-16width: 4rem
w-32width: 8rem
w-64width: 16rem
w-autowidth: auto
w-1/2width: 50%
w-1/3width: 33.333%
w-2/3width: 66.667%
w-1/4width: 25%
w-3/4width: 75%
w-fullwidth: 100%
w-screenwidth: 100vw
w-fitwidth: fit-content
w-minwidth: min-content
w-maxwidth: max-content

Height​

ClassCSS
h-0height: 0
h-4height: 1rem
h-8height: 2rem
h-16height: 4rem
h-32height: 8rem
h-64height: 16rem
h-autoheight: auto
h-1/2height: 50%
h-fullheight: 100%
h-screenheight: 100vh
h-fitheight: fit-content

Min / Max Width & Height​

ClassCSS
min-w-0min-width: 0
min-w-fullmin-width: 100%
max-w-smmax-width: 24rem
max-w-mdmax-width: 28rem
max-w-lgmax-width: 32rem
max-w-xlmax-width: 36rem
max-w-2xlmax-width: 42rem
max-w-4xlmax-width: 56rem
max-w-6xlmax-width: 72rem
max-w-fullmax-width: 100%
max-w-screen-smmax-width: 640px
max-w-screen-mdmax-width: 768px
max-w-screen-lgmax-width: 1024px
max-w-screen-xlmax-width: 1280px
min-h-0min-height: 0
min-h-fullmin-height: 100%
min-h-screenmin-height: 100vh
max-h-fullmax-height: 100%
max-h-screenmax-height: 100vh

🎨 Typography​

Font Size​

ClassCSSSize
text-xsfont-size: 0.75rem12px
text-smfont-size: 0.875rem14px
text-basefont-size: 1rem16px
text-lgfont-size: 1.125rem18px
text-xlfont-size: 1.25rem20px
text-2xlfont-size: 1.5rem24px
text-3xlfont-size: 1.875rem30px
text-4xlfont-size: 2.25rem36px
text-5xlfont-size: 3rem48px
text-6xlfont-size: 3.75rem60px
text-7xlfont-size: 4.5rem72px
text-8xlfont-size: 6rem96px
text-9xlfont-size: 8rem128px

Font Weight​

ClassCSS
font-thinfont-weight: 100
font-extralightfont-weight: 200
font-lightfont-weight: 300
font-normalfont-weight: 400
font-mediumfont-weight: 500
font-semiboldfont-weight: 600
font-boldfont-weight: 700
font-extraboldfont-weight: 800
font-blackfont-weight: 900

Font Family​

ClassCSS
font-sansfont-family: ui-sans-serif, system-ui, sans-serif
font-seriffont-family: ui-serif, Georgia, serif
font-monofont-family: ui-monospace, monospace

Text Alignment​

ClassCSS
text-lefttext-align: left
text-centertext-align: center
text-righttext-align: right
text-justifytext-align: justify

Text Decoration​

ClassCSS
underlinetext-decoration: underline
overlinetext-decoration: overline
line-throughtext-decoration: line-through
no-underlinetext-decoration: none

Text Transform​

ClassCSS
uppercasetext-transform: uppercase
lowercasetext-transform: lowercase
capitalizetext-transform: capitalize
normal-casetext-transform: none

Line Height​

ClassCSS
leading-noneline-height: 1
leading-tightline-height: 1.25
leading-snugline-height: 1.375
leading-normalline-height: 1.5
leading-relaxedline-height: 1.625
leading-looseline-height: 2

Letter Spacing​

ClassCSS
tracking-tighterletter-spacing: -0.05em
tracking-tightletter-spacing: -0.025em
tracking-normalletter-spacing: 0
tracking-wideletter-spacing: 0.025em
tracking-widerletter-spacing: 0.05em
tracking-widestletter-spacing: 0.1em

Text Overflow​

ClassCSS
truncateoverflow: hidden; text-overflow: ellipsis; white-space: nowrap
text-ellipsistext-overflow: ellipsis
text-cliptext-overflow: clip

Whitespace​

ClassCSS
whitespace-normalwhite-space: normal
whitespace-nowrapwhite-space: nowrap
whitespace-prewhite-space: pre
whitespace-pre-linewhite-space: pre-line
whitespace-pre-wrapwhite-space: pre-wrap

🎨 Colors​

Text Color​

text-{color}-{shade}
ClassExample
text-blackBlack text
text-whiteWhite text
text-gray-500Medium gray
text-red-500Medium red
text-blue-500Medium blue
text-green-500Medium green
text-yellow-500Medium yellow
text-purple-500Medium purple
text-pink-500Medium pink
text-indigo-500Medium indigo

Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Background Color​

bg-{color}-{shade}
ClassExample
bg-transparentTransparent background
bg-blackBlack background
bg-whiteWhite background
bg-gray-100Light gray
bg-blue-500Medium blue
bg-gradient-to-rGradient to right

Border Color​

border-{color}-{shade}
ClassExample
border-transparentTransparent border
border-blackBlack border
border-gray-300Light gray border
border-blue-500Blue border

Opacity​

ClassCSS
opacity-0opacity: 0
opacity-25opacity: 0.25
opacity-50opacity: 0.5
opacity-75opacity: 0.75
opacity-100opacity: 1

🔲 Borders​

Border Width​

ClassCSS
border-0border-width: 0
borderborder-width: 1px
border-2border-width: 2px
border-4border-width: 4px
border-8border-width: 8px
border-tborder-top-width: 1px
border-rborder-right-width: 1px
border-bborder-bottom-width: 1px
border-lborder-left-width: 1px

Border Style​

ClassCSS
border-solidborder-style: solid
border-dashedborder-style: dashed
border-dottedborder-style: dotted
border-doubleborder-style: double
border-noneborder-style: none

Border Radius​

ClassCSS
rounded-noneborder-radius: 0
rounded-smborder-radius: 0.125rem
roundedborder-radius: 0.25rem
rounded-mdborder-radius: 0.375rem
rounded-lgborder-radius: 0.5rem
rounded-xlborder-radius: 0.75rem
rounded-2xlborder-radius: 1rem
rounded-3xlborder-radius: 1.5rem
rounded-fullborder-radius: 9999px
rounded-t-lgTop corners only
rounded-r-lgRight corners only
rounded-b-lgBottom corners only
rounded-l-lgLeft corners only

Divide (Between Children)​

ClassCSS
divide-xVertical dividers between children
divide-yHorizontal dividers between children
divide-gray-200Divider color

🌫️ Effects​

Box Shadow​

ClassDescription
shadow-smSmall shadow
shadowDefault shadow
shadow-mdMedium shadow
shadow-lgLarge shadow
shadow-xlExtra large shadow
shadow-2xl2x large shadow
shadow-innerInset shadow
shadow-noneNo shadow

Ring (Focus Outline)​

ClassDescription
ring-0No ring
ring-11px ring
ring-22px ring
ring-44px ring
ring-blue-500Ring color
ring-offset-2Ring offset

Blur​

ClassCSS
blur-nonefilter: blur(0)
blur-smfilter: blur(4px)
blurfilter: blur(8px)
blur-mdfilter: blur(12px)
blur-lgfilter: blur(16px)
blur-xlfilter: blur(24px)
blur-2xlfilter: blur(40px)
blur-3xlfilter: blur(64px)

🔄 Transforms​

Scale​

ClassCSS
scale-0transform: scale(0)
scale-50transform: scale(0.5)
scale-75transform: scale(0.75)
scale-90transform: scale(0.9)
scale-95transform: scale(0.95)
scale-100transform: scale(1)
scale-105transform: scale(1.05)
scale-110transform: scale(1.1)
scale-125transform: scale(1.25)
scale-150transform: scale(1.5)

Rotate​

ClassCSS
rotate-0transform: rotate(0deg)
rotate-1transform: rotate(1deg)
rotate-3transform: rotate(3deg)
rotate-6transform: rotate(6deg)
rotate-12transform: rotate(12deg)
rotate-45transform: rotate(45deg)
rotate-90transform: rotate(90deg)
rotate-180transform: rotate(180deg)
-rotate-45transform: rotate(-45deg)

Translate​

ClassCSS
translate-x-0transform: translateX(0)
translate-x-1transform: translateX(0.25rem)
translate-x-4transform: translateX(1rem)
translate-x-1/2transform: translateX(50%)
translate-x-fulltransform: translateX(100%)
-translate-x-1/2transform: translateX(-50%)
translate-y-4transform: translateY(1rem)

Skew​

ClassCSS
skew-x-0transform: skewX(0deg)
skew-x-3transform: skewX(3deg)
skew-x-6transform: skewX(6deg)
skew-x-12transform: skewX(12deg)
skew-y-3transform: skewY(3deg)

⚡ Transitions & Animation​

Transition Property​

ClassCSS
transition-noneNo transition
transition-alltransition-property: all
transitiontransition-property: color, background-color, border-color, etc.
transition-colorstransition-property: color, background-color, border-color
transition-opacitytransition-property: opacity
transition-shadowtransition-property: box-shadow
transition-transformtransition-property: transform

Transition Duration​

ClassCSS
duration-75transition-duration: 75ms
duration-100transition-duration: 100ms
duration-150transition-duration: 150ms
duration-200transition-duration: 200ms
duration-300transition-duration: 300ms
duration-500transition-duration: 500ms
duration-700transition-duration: 700ms
duration-1000transition-duration: 1000ms

Transition Timing​

ClassCSS
ease-lineartransition-timing-function: linear
ease-intransition-timing-function: ease-in
ease-outtransition-timing-function: ease-out
ease-in-outtransition-timing-function: ease-in-out

Animation​

ClassDescription
animate-noneNo animation
animate-spinContinuous rotation
animate-pingPing/pulse effect
animate-pulseSubtle pulse
animate-bounceBouncing animation

📱 Responsive Design​

Breakpoints​

PrefixMin WidthCSS
sm:640px@media (min-width: 640px)
md:768px@media (min-width: 768px)
lg:1024px@media (min-width: 1024px)
xl:1280px@media (min-width: 1280px)
2xl:1536px@media (min-width: 1536px)

Usage Examples​

<!-- Stack on mobile, row on desktop -->
<div class="flex flex-col md:flex-row">

<!-- Hidden on mobile, visible on desktop -->
<div class="hidden lg:block">

<!-- Full width on mobile, half on tablet, third on desktop -->
<div class="w-full md:w-1/2 lg:w-1/3">

<!-- Different padding per breakpoint -->
<div class="p-4 md:p-6 lg:p-8">

🖱️ State Variants​

Hover, Focus, Active​

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 active:bg-blue-800">
  Button
</button>
PrefixState
hover:Mouse hover
focus:Keyboard focus
active:Being clicked
visited:Visited link
disabled:Disabled state
focus-visible:Keyboard-only focus
focus-within:Child has focus

Group Hover​

<div class="group">
  <p class="group-hover:text-blue-500">Changes when parent hovered</p>
</div>

Peer States​

<input class="peer" type="checkbox" />
<label class="peer-checked:text-blue-500">Checked!</label>

Dark Mode​

<div class="bg-white dark:bg-gray-900">
  <p class="text-black dark:text-white">Dark mode text</p>
</div>

🎯 Common Patterns​

Centering​

<!-- Flex center -->
<div class="flex items-center justify-center">

<!-- Grid center -->
<div class="grid place-items-center">

<!-- Absolute center -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">

Card Component​

<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
  <h2 class="text-xl font-bold mb-2">Card Title</h2>
  <p class="text-gray-600">Card content goes here.</p>
</div>

Button Styles​

<!-- Primary -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Primary
</button>

<!-- Outline -->
<button class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-bold py-2 px-4 rounded transition-colors">
  Outline
</button>

<!-- Pill -->
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full">
  Pill Button
</button>

Input Field​

<input 
  type="text" 
  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="Enter text..."
/>

Avatar​

<img class="w-12 h-12 rounded-full object-cover" src="avatar.jpg" alt="Avatar" />

Badge​

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
  Active
</span>

Truncated Text​

<p class="truncate w-48">This is a very long text that will be truncated...</p>

<!-- Multi-line clamp -->
<p class="line-clamp-3">Multi-line text that will be clamped to 3 lines...</p>

🛠️ Utility Shortcuts​

PatternClasses
Full width/heightw-full h-full
Full screenw-screen h-screen
Squarew-12 h-12 (same values)
Circlew-12 h-12 rounded-full
Flex centerflex items-center justify-center
Grid centergrid place-items-center
Sticky headersticky top-0
Fixed footerfixed bottom-0 left-0 right-0
Overflow hiddenoverflow-hidden
Scrolloverflow-auto or overflow-scroll
No selectselect-none
Pointer cursorcursor-pointer
Not allowedcursor-not-allowed

📚 Resources​

ResourceLink
Official Docstailwindcss.com/docs
Cheat Sheetnerdcave.com/tailwind-cheat-sheet
Tailwind UItailwindui.com
Headless UIheadlessui.com
Heroiconsheroicons.com

Last updated: February 2026